<template>
  <div class="app">
    <BookListComponent :book-list="bookList"/>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="current_change"
    >
    </el-pagination>
  </div>

</template>
<script>
import {countBookList, getBookListByNew} from "@/utils/api";
import BookInfoComponent from "@/components/book/BookInfoComponent";
import BookListComponent from "@/components/book/BookListComponent";

export default {
  name: "RecommendNewComponent",
  components: {BookListComponent, BookInfoComponent},
  props: {
    pageSize:Number
  },
  data() {
    return {
      bookList:[],
      currentPage :1,
      total : 0,
      // pageSize : 4
      dialogCode: false,
      currentBook:Object
    }
  }, methods: {
    read(){
      this.$router.push({name:"/ChapterPage",params:{book : this.currentBook}})
    },
    show(book){
      this.currentBook = book
      this.dialogCode = true
    },
    current_change(newPage){
      this.currentPage = newPage
      getBookListByNew({
        currentPage : this.currentPage,
        pageSize : this.pageSize
      }).then(res=>{
        if(res.code === 200){
          // this.notify(res.message,"","success")
          //console.log(res)
          this.bookList = res.objects
        }else{
          this.notify(res.message,"","error")
        }
      })
    },
    notify(msg,title,type) {
      this.$notify({
        title: title,
        message: msg,
        type: type
      });
    },
    log(msg,type){
      this.$message({
        message: msg,
        type: type
      });
    }
  }, watch: {}, computed: {
  },mounted() {
    countBookList().then(res=>{
      if(res.code === 200){
        // this.notify(res.message,"","success")
        //console.log(res)
        this.total = res.objects
      }else{
        this.notify(res.message,"","error")
      }
    })
    this.current_change(1)

  },filters:{
    url(value){
      return '/api'+value;
    }
  }
}
</script>

<style scoped>
</style>